let startEle = document.getElementById("start")
startEle.addEventListener('click', start)

//先获取元素 再通过计算样式获得width
let progressBar = document.getElementById("progress_bar")
let width = getComputedStyle(progressBar).width

//当我点击的时候一个是倒计时 一个是出现狼
function start() {
    //这个地方是点击开始之后 开始那两个字消失
    startEle.style.display = 'none';
    //倒计时
    cutDown()
    //出现狼
    showWolf()
}

//先声明一个定时器,方便后续进行clear
let cutDownTimer;
//我定义一个游戏结束的时间 让时间到了之后 上面的进度条和狼出现都能停止
let gameOverTimer = false;

//这个是倒计时的功能 就是他的长度慢慢减少 逐渐到零 并且停止
function cutDown() {
    cutDownTimer = setInterval(function () {
        //通过计算样式获取 width,因为如果直接获取style 我们的css文件是单独的所以获取不到
        //将获取样式放在计时器里面的原因是如果放在外面他只会再原始长度上减去,没有办法实现一点点减少
        let width = getComputedStyle(progressBar).width;
        //这里必须要加一个paraInt 因为width不是数字
        if (parseInt(width) <= 0) {
            clearInterval(cutDownTimer);
            gameOverTimer = true;
        }
        //因为获取的单位是px 所以要把他数字化 来计算
        //这个地方刚开始做错了忘记写的啥了但是记住
        progressBar.style.width = parseInt(width) - 2 + "px";

        //100是毫秒
    }, 100)
}

//这里往下是出现狼的功能实现
function showWolf() {
    //1,出现浪的图片
    let wolfImg = document.createElement("img")
    //2,存放浪的容器
    let wolfDiv = document.getElementById("wolf_box")
    //3.吧浪的图片放到浪的容器里
    wolfDiv.appendChild(wolfImg)

    //3.狼出现的位置,这里使用定时器 让狼在不同的洞洞里隔多长时间出现
    let showWolfTimer;
    // 在定义一个定时器,实现狼在一个洞里慢慢出现
    let wolfChangeTimer;
    showWolfTimer = setInterval(function () {
        //if语句里实现了让狼连续出现 或者 在时间结束之后不再出现
        if (gameOverTimer) {
            clearInterval(showWolfTimer);
        } else {
            wolfImg.style.position = "absolute";
            wolfImg.style.left = getPosition().left;
            wolfImg.style.top = getPosition().top;
            let wolfType = getWolf();
            //定义一个原始的i,到5之间用来实现狼逐渐出现
            let i = 0
            wolfChangeTimer = setInterval(function () {
                if (i <= 5) {
                    // 用`${}`可以让代码原样显示
                    wolfImg.src = `../images/${wolfType}${i}.png`
                    i++;
                } else {
                    clearInterval(wolfChangeTimer);
                    //i=0是重新开始这个过程
                    i = 0;
                }

            }, 300)
        }
    }, 300)

}

//这里是随机获取浪出现的坐标
function getPosition() {
    let arrayPosition = [
        {left: "98px", top: "115px"},
        {left: "17px", top: "160px"},
        {left: "15px", top: "220px"},
        {left: "30px", top: "293px"},
        {left: "122px", top: "273px"},
        {left: "207px", top: "295px"},
        {left: "200px", top: "211px"},
        {left: "187px", top: "141px"},
        {left: "100px", top: "185px"}
    ];

    let index = Math.floor(Math.random() * arrayPosition.length)
    return arrayPosition[index];
}

//获取浪的类型是大狼还是小狼
function getWolf() {
    return Math.floor(Math.random() * 10) === 0 ? "h" : "x"
}